<template>
  <div class="main-box">
      <div class="main">
        <el-row>
            <el-col :span="7"  class="search">
                <span>查询内容 :</span>
                <el-input v-model="input" placeholder="请输入内容" size="big"  style="width:15vw"></el-input>
            </el-col>
                <el-col :span="3">
                    <div class="searchBtn move" @click="toLogin()"><i class="el-icon-search"></i>搜索</div>
            </el-col>
        </el-row>
        <!-- //列表 -->
        <el-table
        :data="tableData.slice((page-1)*pageSize,page*pageSize)"
        border
        style="width: 100%">
        <el-table-column
            prop="id"
            label="序号" 
            min-width="15%"
            align="center">
        </el-table-column>
        <el-table-column
            prop="name"
            label="名称"
             align="center"
             min-width="35%">
        </el-table-column>
        <el-table-column
            prop="createDate"
            label="创建时间"
             min-width="30%"
            align="center">
        </el-table-column>
            <el-table-column
            prop="createPeople"
            label="创建人"
            align="center"
            min-width="30%">
        </el-table-column>
            <el-table-column
            prop="number"
            label="数据行数"
              min-width="30%"
            align="center">
        </el-table-column>
            <el-table-column
            prop="state"
            label="状态"
            min-width="30%"
            align="center">
        </el-table-column>
            <el-table-column
            prop="address"
            align="center"
            label="操作">
            <template slot-scope="scope">
                <el-button
                @click.native.prevent="automaticClean(scope.$index, tableData)"
                type="text"
                size="small"
                style="width:4vw"
                >
                自动清洗
                </el-button>
                <el-button
                @click.native.prevent="manualClean(scope.$index, tableData)"
                type="text"
                style="width:4vw"
                size="small">
                手动清洗
                </el-button>
                <el-button
                @click.native.prevent="release(scope.$index, tableData);dialogVisible = true"
                type="text"
                style="width:4vw"
                size="small">
                发布
                </el-button>
                <el-button
                @click.native.prevent="seeJournal(scope.$index, tableData)"
                type="text"
                style="width:4vw"
                size="small">
                查看操作日志
                </el-button>
            </template>
        </el-table-column>
        </el-table>
        <!-- //分页 -->
         <el-pagination
            class="pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[1, 3, 5, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
        </el-pagination>
        <!-- //发布弹窗 -->
        <el-dialog
            title="发布"
            :visible.sync="dialogVisible"
            width="35%"
            :before-close="handleClose">
           <div class="wait">选择发布方式</div>
            <div>
                <span class="releaseTitle">发布方式:</span>
                <el-select v-model="value" placeholder="请选择" size="small">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    style="padding-left:10px"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div>
                 <span class="releaseTitle">添加方式:</span>
                 <span class="addMode move" :style="{backgroundColor:addCor[0].bc,color:addCor[0].cor,border:addCor[0].bor}" @click="upAddBtnFn(1)">选择已有表</span>
                 <span class="addMode move" :style="{backgroundColor:addCor[1].bc,color:addCor[1].cor,border:addCor[1].bor}" @click="upAddBtnFn(2)">新增表</span>
            </div>
            <div>
                 <span class="releaseTitle">新表名称:</span>
                   <el-select v-model="value" placeholder="请选择" size="small">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    style="padding-left:10px"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="wait" style="margin:20px 0px">待发布字段</div>
             <el-table
                :data="witeDate"
                class="waitTable"
                border>
                 <el-table-column
                 min-width="10%"
                  type="selection">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="字段名称"
                    min-width="40%">
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="类型"
                    min-width="40%">
                </el-table-column>
                <el-table-column
                    prop="inputType"
                     min-width="40%"
                    label="输出类型">
                </el-table-column>
            </el-table>
            <div class="dialog-footer">
                <span  @click="dialogVisible = false">取消</span>
                <span  @click="dialogVisible = false">确定</span>
            </div>
        </el-dialog>
      </div>
  </div>
</template>

<script>
import { getTableList} from "@/api/burnPower/interface";
export default {
    name:'clearList',
    data () {
        return {
            input:'',
            tableData: [{
                id:1,
                name: '热力学数据v1',
                createDate: '2012-03-01',
                createPeople: 'admin',
                number:10000,
                state:'无任务'
            }, {
                id:2,
                name: '热力学数据v1',
                createDate: '2012-03-01',
                createPeople: 'admin',
                number:10000,
                state:'任务进行中'
            }, {
                id:3,
                name: '热力学数据v1',
                createDate: '2012-03-01',
                createPeople: 'admin',
                number:10000,
                state:'任务进行中'
            }, {
                id:4,
                name: '热力学数据v1',
                createDate: '2012-03-01',
                createPeople: 'admin',
                number:10000,
                state:'任务进行中'
            }, {
                id:5,
                name: '热力学数据v1',
                createDate: '2012-03-01',
                createPeople: 'admin',
                number:10000,
                state:'任务进行中'
            }, {
                id:6,
                name: '热力学数据v1',
                createDate: '2012-03-01',
                createPeople: 'admin',
                number:10000,
                state:'任务进行中'
            }, {
                id:7,
                name: '热力学数据v1',
                createDate: '2012-03-01',
                createPeople: 'admin',
                number:10000,
                state:'任务进行中'
            }],
            pageSize:5,
            page:1,
            dialogVisible: false,
            options: [{
            value: '方式1',
            label: '方式1'
            }, {
            value: '方式2',
            label: '方式2'
            }, {
            value: '方式3',
            label: '方式3'
            }],
            tableNames:[{
            value: '表名1',
            label: '表名1'
            }, {
            value: '表名2',
            label: '表名2'
            }, {
            value: '表名3',
            label: '表名3'
            }],
            value: '',
            witeDate:[{
                name:'序号',
                type:'String',
                inputType:'String'
            },{
                name:'序号',
                type:'String',
                inputType:'String'
            },{
                name:'序号',
                type:'String',
                inputType:'String'
            },{
                name:'序号',
                type:'String',
                inputType:'String'
            },{
                name:'序号',
                type:'String',
                inputType:'String'
            }],
            addCor:[{bc:"#bd4541",cor:"#fff",bor:'none'},{bc:"#fff",cor:"#333",bor:' 1px solid #ccc'}]
        }
    },
    methods:{
        //自动清洗
        automaticClean(index,rows){},
        //手动清洗
        manualClean(index,rows){},
        //发布
        release(index,rows){},
        //查看操作日志
        seeJournal(index, rows) {},
        //发布弹窗添加方式样式切换
        upAddBtnFn(val){
            if(val == 1){
                this.addCor.splice(0,1, {bc:"#bd4541",cor:"#fff",bor:'none'})
                this.addCor.splice(1,1,{bc:"#fff",cor:"#333",bor:' 1px solid #ccc'})
            }else{
               this.addCor.splice(1,1, {bc:"#bd4541",cor:"#fff",bor:'none'})
                this.addCor.splice(0,1,{bc:"#fff",cor:"#333",bor:' 1px solid #ccc'})
            }
         },
         //分页
        handleSizeChange(val) {
        this.pageSize=val
        },
        handleCurrentChange(val) {
            this.page = val
        },
        //发布弹出右上角关闭
         handleClose(done) {
             this.dialogVisible = false
        //     this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
      },
      toLogin(){
          getTableList(1,1,100).then((res)=>{
              console.log(res);
          })
      }
    }
}
</script>

<style scoped>
*{
    margin: 0px;
    padding: 0px;
}
.main-box{
    padding: 30px 20px;
    margin-left: 30px;
    box-sizing: border-box;
    background-color: #f5f5f5;
}
.main{
    width: 100%;
    height: 817px;
    padding: 30px;
    background-color: #fff;
    color: #333;
    border-radius: 20px;
    box-sizing: border-box;
}
.search{
    display: flex;
    align-items: center;
    margin-bottom: 6vh;
}
.search>span{
    /* font-family: PuHuiTi;
    font-weight: Regular; */
    font-size: 20px;
    margin-right: 10px;
}
.searchBtn{
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    margin-left: 1vw;
    background-color: #bd4541;
    color: #fff;
    box-sizing: border-box;
    border-radius: 5px;
}
.searchBtn>i{
    margin-right: 5px;
}
.pagination{
    position: absolute;
    right: 50px;
    margin-top: 20px;
}
.releaseTitle{
    display: inline-block;
    font-size: 14px;
    margin: 20px 15px 10px 0px;
}
.addMode{
    display: inline-block;
    width: 5vw;
    padding: 6px 0;
    text-align: center;
    border-radius: 5px;
}   
.addMode:last-child{
    margin-left: 1vw;
}
.wait{
    font-weight: bold;
}
.waitTable{
    width: 28vw;
    height: 220px;
    overflow: auto;
    border-radius: 10px;
}
.dialog-footer>span{
    display: inline-block;
    width: 5vw;
    padding: 8px 0;
    text-align: center;
    background-color: #bd4541;
    color: #fff;
    border-radius: 5px;
}

.dialog-footer>span:first-child{
    margin:20px 20px 0px 20vw;
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
}
.dialog-footer>span:hover{
    cursor: pointer;
    background-color: #bd454150;
    color: #fff;
    border: 1px solid #bd454150;
}
.move:hover{
      cursor: pointer;
}
</style>